<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <script src="js/code.js"></script>
		<script src="js/ajax.js"></script>
        <script src="js/type1.js"></script>
        <script src="js/type2.js"></script>
        <script src="js/type3.js"></script>
        <script src="js/type4.js"></script>
        <script src="js/type5.js"></script>
        <script src="js/type6.js"></script>
        <script src="js/type7.js"></script>
        <script src="js/type8.js"></script>
        <script src="js/type9.js"></script>
        <script src="js/type10.js"></script>
        <link rel="stylesheet" type="text/css" href="css/main.css">

        <!-- fragment shader -->
        <script id="shader-fs" type="x-shader/x-fragment">
            varying lowp vec4 vColor;
            void main(void) {
            gl_FragColor = vColor;
            }
        </script>        

        <!-- vertex shader -->
        <script id="shader-vs" type="x-shader/x-vertex">
            attribute vec3 vertexPosition;
            uniform mat4 modelViewMatrix;
            uniform mat4 perspectiveMatrix;
            attribute vec4 aVertexColor; 
            varying lowp vec4 vColor;
            void main(void) {
            gl_Position = perspectiveMatrix * modelViewMatrix * vec4(vertexPosition, 1.0);
            vColor = aVertexColor;
            }
        </script>
        <style>
    	.anime {
    	    animation:resize 5s;
    	    -webkit-animation:resize 5s;
    	}
    	@keyframes resize
    	{
    	    from {height:0px;width:0px;}
    	    to {height:255px;width:255px;}
    	}

    	@-webkit-keyframes resize
    	{
    	    from {height:0px;width:0px;}
    	    to {height:255px;width:255px;}
    	}
        </style>

    </head>
    <body onload="initPage('canvas');">
        <table>
            <tr>
                <td>
                    <div id="box" class="box anime">
                        <canvas id="canvas" width="255" height="255">
                        </canvas> 
                    </div>
                    Mingi selgitus all olevatele kontrollidele<br/>
                    <table>
                        <tr>
                            <td>Väärtus</td>
                            <td><input name="reed" id="someValue" title="Value" min="0" max="255" type="range" value="255" onchange="doOnSlider(this, 'someText');"/><br/></td>
                            <td><label id="someLabel"></label></td>
                        </tr>
                    </table>
                    <button onclick="doTask(this);">Tegutse</button>
                </td>
                <td>
                    Mingi text.<br/>
                </td>
			</tr>
        </table>
    </body>
</html>
